<template>
    <view class="page savepadding">
        <view class="step-wrap">
            <view class="active">证件上传</view>
            <view :class="{active:page>1}">确认信息</view>
        </view>

        <view class="card" v-if="page==1">
            <view class="title">上传证件照*</view>
            <view class="desc">上传后自动填入相关信息</view>
            <view class="img-wrap">
                <image :src="formData.idCardImg|mmvImageUrl" @click="onCheckIdCard('front')"></image>
                <image :src="formData.idCardImgBack|mmvImageUrl" @click="onCheckIdCard('back')"></image>
            </view>
            <view class="img-wrap">
                <image :src="formData.driverImg|mmvImageUrl" @click="onCheckDriverCard('front')"></image>
                <image :src="formData.driverImgBack|mmvImageUrl" @click="onCheckDriverCard('back')"></image>
            </view>
            <view class="img-wrap">
                <image :src="formData.cardImgFront|mmvImageUrl" @click="onCheckBankCard('front')"></image>
                <image :src="formData.cardImgBack|mmvImageUrl" @click="onCheckBankCard('back')"></image>
            </view>
            <view class="desc">请核对您的身份证信息，若信息有误请重新扫描</view>
            <view class="title">客户信息*</view>
            <view class="list">
                <view class="label">客户姓名 <text>{{formData.customerName}}</text></view>
                <view class="label">客户身份证号码 <text>{{formData.idCardNo}}</text></view>
                <view class="label">失效日期 <text>{{formData.idCardExpirydate}}</text></view>
                <view class="label">驾驶证号 <text>{{formData.driverNo}}</text></view>
                <view class="label">驾驶证有效期 <text>{{formData.driverValidity}}</text></view>
                <!-- <view class="label">客户手机号码 <text>{{formData.contactMobile}}</text></view> -->
                <view class="label">客户手机号码
                    <u--input inputAlign="right" v-model="formData.contactMobile" placeholder="请输入手机号" />
                </view>
                <view class="label">开户行 
				<!-- <u-input v-model="formData.bankDeposit" inputAlign="right"  placeholder="请上传银行卡" disabled disabledColor="#FFFFFF">
				</u-input> -->
				
				<text @click="onClickBankDeposit">{{formData.bankDeposit}}</text>
				</view>
                <view class="label">银行卡号
                    <!-- <u--input inputAlign="right" v-model="formData.bankCardNo" placeholder="请上传银行卡" disabled disabledColor="#FFFFFF" /> -->
					<text >{{formData.bankCardNo}}</text>
                </view>
				
				<view class="label"  v-if="1!==formData.bankCardType">
					<text>有效期</text>
				
					<!-- <u-input v-model="formData.expireDate" inputAlign="right"  placeholder="请上传银行卡" disabled disabledColor="#FFFFFF">
					</u-input> -->
					<text >{{formData.expireDate}}</text>
				</view>
				
				
				<view class="label" v-if="1!==formData.bankCardType">
					<text>安全码</text>
				
					<u-input v-model="formData.cvv" inputAlign="right"  placeholder="请输入安全码">
					</u-input>
				
				</view>
				
				
            </view>
            <!-- <view class="tip">
                <text>中国银行每日限额数为每日限额数为每日限额数为中国银行每日限额数为每日限额数为每日限额数为</text>
            </view> -->
            <view class="tip">
                <text>{{bankSelected.quotaExplain}}</text>
            </view>
        </view>

        <u-picker :show="isBankDeposit" :columns="[formData.bankSupportList]" keyName="bankName" @confirm="onconfirm" @cancel="isBankDeposit=false"></u-picker>

        <view class="card" v-if="page==2">
            <view class="title">客户信息</view>
            <view class="list">
                <view class="label">客户姓名 <text>{{formData.customerName}}</text></view>
                <view class="label">客户身份证号码 <text>{{formData.idCardNo}}</text></view>
                <view class="label">客户手机号码 <text>{{formData.contactMobile}}</text></view>
                <view class="label">开户行 <text>{{formData.bankDeposit}}</text></view>
                <view class="label">银行卡号 <text>{{formData.bankCardNo}}</text></view>
				<view class="label"  v-if="1!==formData.bankCardType">
					有效期
					<text >{{formData.expireDate}}</text>
				</view>
				
				<view class="label" v-if="1!==formData.bankCardType">
					安全码
					<text >{{formData.cvv}}</text>
				</view>
            </view>
        </view>
        <view class="card" v-if="page==2">
            <view class="list">
                <view class="label">客户短信授权通知 <text @click="showxieyi=true">协议说明</text></view>
                <view class="label">客户手机号码
                    <u--input inputAlign="right" v-model="formData.mobileNo" placeholder="请输入手机号" />
                </view>
                <view class="label">手机验证码
                    <view>
                        <u--input class="captcha_ipt" v-model="formData.verificationCode" inputAlign="right" placeholder="请输入验证码" />
                        <view class="captcha_btn" v-if="captchaCD>0">{{captchaCD}}秒后重发</view>
                        <view class="captcha_btn" @click="onClickCapthca" v-else>获取验证码</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 按钮区 -->
        <view class="bottom_btns_wrap" style="background:#fff">
            <view class="bottom_btns savepadding">
                <view class="button" @click="pre">上一步</view>
                <view class="button" @click="next">下一步</view>
            </view>
        </view>
        <!-- 登录弹窗 -->
        <LoginMask></LoginMask>

        <!-- 协议弹窗 -->
        <xieyi v-if="showxieyi" @ok="showxieyi=false"></xieyi>
    </view>
</template>

<script>
import uuid from 'uuid'
import get from 'lodash/get'
import isEmpty from 'lodash/isEmpty'
import * as relaNameApi from '@/common/apis/relaName-api';
import * as orderApi from '@/common/apis/order-api';
import * as baseApi from '@/common/api';
import LoginMask from '@/components/layout/login-mask.vue';
import xieyi from './compnents/xieyi.vue';

export default {
    components: {
        LoginMask,
        xieyi,
    },
    data() {
        return {
            showxieyi: false,
            page: 1,
            formData: {
                idCardImg: "/static/idCardImg.jpg", // 身份证正面
                idCardImgBack: "/static/idCardImgBack.jpg", // 身份证背面
                driverImg: "/static/driverImg.jpg", // 驾驶证正页
                driverImgBack: "/static/driverImgBack.jpg", // 驾驶证副页
                customerName: "", // 姓名
                idCardNo: "", // 身份证号
                idCardExpirydate: "", // 身份证失效日期
                driverNo: "", // 驾驶证号
                quasiDrivingType: "", // 准驾车型
                driverValidity: "", // 驾驶证失效日期
                contactMobile: "", // 联系电话
                bankSupportList: [
                    {
                        bankName: "银行名称", // 银行名称
                        bankCode: "银行简码", // 银行简码
                        quotaExplain: "限额说明", // 限额说明
                    },
                ],
                orderNo: uuid.v1().slice(0, 32), // 订单号
                cardImgFront: "/static/mine/bank0.png", // 银行卡正面
                cardImgBack: "/static/mine/bank1.png", // 银行卡背面
                bankDeposit: "", // 开户行
                bankCardNo: "", // 银行卡号
                mobileNo: "", // 手机号
                verificationCode: "", // 验证码
				bankCardType: 1,//1借记   2及其他信用
				expireDate: '',//有效期
				cvv: '',//安全码
            },
            isBankDeposit: false,
            bankDepositActive: -1,
            captchaTimer: null,
            captchaCD: 0,
        };
    },
    computed: {
        openid() {
            return this.$store.state.user.openid;
        },
        bankSelected() {
            return get(this.formData.bankSupportList, this.bankDepositActive, {});
        },
    },
    watch: {
        openid(val) {
            if (val) {
                this.getCustomerSginInfo();
            }
        },
    },
    async onLoad() {
        await this.getCustomerSginInfo();
    },
    methods: {
        async getCustomerSginInfo() {
            // 验证实名
            const verifyRelaName = await this.$store.dispatch('app/verifyRelaName', { openid: this.openid });
            if (verifyRelaName == false) {
                return;
            }
            uni.showToast({ title: '获取信息中...', icon: 'loading' });
            try {
                const result = await orderApi.getCustomerSginInfo();
				
				
				// idCardImg: "/static/idCardImg.jpg", // 身份证正面
				// idCardImgBack: "/static/idCardImgBack.jpg", // 身份证背面
				// driverImg: "/static/driverImg.jpg", // 驾驶证正页
				// driverImgBack: "/static/driverImgBack.jpg", // 驾驶证副页
				
				
				if(uni.$u.test.isEmpty(result.idCardImg)){
					result.idCardImg = "/static/idCardImg.jpg";
				}
				
				if(uni.$u.test.isEmpty(result.idCardImgBack)){
					result.idCardImgBack = "/static/idCardImgBack.jpg";
				}
				
				if(uni.$u.test.isEmpty(result.driverImg)){
					result.driverImg = "/static/driverImg.jpg";
				}
				
				if(uni.$u.test.isEmpty(result.driverImgBack)){
					result.driverImgBack = "/static/driverImgBack.jpg";
				}
				
				if(uni.$u.test.isEmpty(result.customerName)){
					result.customerName = "";
				}
				
				if(uni.$u.test.isEmpty(result.idCardNo)){
					result.idCardNo = "";
				}
				
				if(uni.$u.test.isEmpty(result.idCardExpirydate)){
					result.idCardExpirydate = "";
				}
				
				if(uni.$u.test.isEmpty(result.driverNo)){
					result.driverNo = "";
				}
				
				if(uni.$u.test.isEmpty(result.driverValidity)){
					result.driverValidity = "";
				}
				
				
                this.formData = Object.assign(this.formData, result);
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },

        async pre() {
            if (this.page == 2) {
                this.page = 1;
            } else {
                uni.navigateBack();
            }
        },
        async next() {
            if (this.page == 1) {
                if (!this.formData.idCardImg || this.formData.idCardImg.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少身份证人像', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardImgBack || this.formData.idCardImgBack.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少身份证国徽', icon: 'error' });
                    return;
                }
                if (!this.formData.customerName) {
                    uni.showToast({ title: '缺少姓名', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardNo) {
                    uni.showToast({ title: '缺少身份证号', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardExpirydate) {
                    uni.showToast({ title: '缺少失效时间', icon: 'error' });
                    return;
                }
                if (!this.formData.driverImg || this.formData.driverImg.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少驾驶证正页', icon: 'error' });
                    return;
                }
                if (!this.formData.driverImgBack || this.formData.driverImgBack.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少驾驶证副页', icon: 'error' });
                    return;
                }
                if (!this.formData.driverNo) {
                    uni.showToast({ title: '缺少驾驶证号', icon: 'error' });
                    return;
                }
                if (!this.formData.quasiDrivingType) {
                    uni.showToast({ title: '缺少准驾车型', icon: 'error' });
                    return;
                }
                if (!this.formData.driverValidity) {
                    uni.showToast({ title: '缺少失效时间', icon: 'error' });
                    return;
                }
                if (!/^1[3456789]\d{9}$/.test(this.formData.contactMobile)) {
                    uni.showToast({
                        title: '手机号错误',
                        icon: 'error',
                        duration: 2000
                    });
                    return;
                }
                if (!this.formData.cardImgFront || this.formData.cardImgFront.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少银行卡正面', icon: 'error' });
                    return;
                }
                if (!this.formData.cardImgBack || this.formData.cardImgBack.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少银行卡反面', icon: 'error' });
                    return;
                }
                if (isEmpty(this.formData.bankCardNo)) {
                    uni.showToast({ title: '缺少银行卡号', icon: 'error' });
                    return;
                }
                if (isEmpty(this.formData.bankDeposit) || this.formData.bankDeposit == '') {
                    uni.showToast({ title: '缺少开户行', icon: 'error' });
                    return;
                }
				
				if (1!==this.formData.bankCardType && uni.$u.test.isEmpty(this.formData.cvv)) {
					uni.showToast({ title: '缺少安全码', icon: 'error' });
					return;
				}
				
                try {
                    uni.showToast({ title: '提交信息中...', icon: 'loading' });
                    await this.mcodifyingCustomerInformation();
                } catch (error) {
                    uni.showToast({ title: error, icon: 'error' });
                }
                this.page = 2;
            } else {
                if (isEmpty(this.formData.verificationCode)) {
                    uni.showToast({ title: '缺少验证码', icon: 'error' });
                    return;
                }
                try {
                    await this.sgin();
                    uni.$emit('getOneSignedBank');
                    uni.navigateBack();
                } catch (error) {
                    uni.showToast({ title: error, icon: 'error' });
                }
            }
        },
        /**
         * 选择图片
         */
        async chooseImage() {
            return new Promise((resolve, reject) => {
                uni.chooseImage({
                    success({ tempFilePaths }) {
                        resolve(tempFilePaths);
                    },
                    fail(err) {
                        uni.showToast({ title: '图片选择失败', icon: 'error' });
                        reject(err);
                    }
                })
            });
        },
        /**
         * 上传图片
         */
        async upload(url) {
            uni.showToast({ title: '图片上传中...', icon: 'loading' });
            try {
                const result = await baseApi.uploadfiles({
                    name: 'file',
                    filePath: url,
                });
                uni.showToast({ title: '图片上传成功', icon: 'success' });
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 提交身份证
         */
        async onCheckIdCard(idCardSide) {
            try {
                const tempFilePaths = await this.chooseImage();
                const url = await this.upload(tempFilePaths[0]);
                const result = await relaNameApi.idCard({
                    url: url,
                    idCardSide,
                });
                if (idCardSide == 'front') {
                    this.formData.idCardImg = url;
                    this.formData.customerName = result.name;
                    // this.formData.address = result.address;
                    this.formData.idCardNo = result.idCard;
                }
                if (idCardSide == 'back') {
                    this.formData.idCardImgBack = url;
                    // this.formData.startDate = result.startDate;
                    this.formData.idCardExpirydate = result.endDate;
                }
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 提交驾驶证
         */
        async onCheckDriverCard(driverCardSide) {
            try {
                const tempFilePaths = await this.chooseImage();
                const url = await this.upload(tempFilePaths[0]);
                if (driverCardSide == 'front') {
                    const result = await relaNameApi.driverCard({
                        url: url,
                    });
                    this.formData.driverImg = url;
                    this.formData.driverNo = result.driverNo;
                    this.formData.quasiDrivingType = result.carType;
                    this.formData.driverValidity = result.endTime;
                }
                if (driverCardSide == 'back') {
                    this.formData.driverImgBack = url;
                }
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        // 提交银行卡
        async onCheckBankCard(Side) {
            try {
                const tempFilePaths = await this.chooseImage();
                const url = await this.upload(tempFilePaths[0]);
                if (Side == 'front') {
                    this.formData.cardImgFront = url;
					
					this.getBankCard()
					
                }
                if (Side == 'back') {
                    this.formData.cardImgBack = url;
                }
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
		
		getBankCard(){
			
			baseApi.getBankCardInfo({
				params:{
					path:this.formData.cardImgFront
				}
			}).then(res=>{
				this.formData.expireDate = res.validDate;
				this.formData.bankCardNo = res.bankCardNumber;
				this.formData.bankDeposit = res.bankName;
				this.formData.bankCardType = res.bankCardType;
			})
		},

        // 选择开户行
        async onClickBankDeposit() {
			//不让选了，识别出来
            // this.isBankDeposit = true;
        },
        async onconfirm({ indexs, value }) {
            this.bankDepositActive = indexs;
            this.formData.bankDeposit = value[0].bankName;
            this.isBankDeposit = false;
        },

        // 下单签约下一步时修改用户信息
        async mcodifyingCustomerInformation() {
            try {
                const result = await orderApi.mcodifyingCustomerInformation({
                    "idCardImg": this.formData.idCardImg, // 身份证正面
                    "idCardImgBack": this.formData.idCardImgBack, // 身份证背面
                    "driverImg": this.formData.driverImg, // 驾驶证正页
                    "driverImgBack": this.formData.driverImgBack, // 驾驶证正页
                    "customerName": this.formData.customerName, // 姓名
                    "idCardNo": this.formData.idCardNo, // 身份证号
                    "idCardExpirydate": this.formData.idCardExpirydate, // 身份证失效日期
                    "driverNo": this.formData.driverNo, // 驾驶证号
                    "quasiDrivingType": this.formData.quasiDrivingType, // 准驾车型
                    "driverValidity": this.formData.driverValidity, // 驾驶证失效日期
                });
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },

        // 获取验证码
        async onClickCapthca() {
            if (!/^1[3456789]\d{9}$/.test(this.formData.mobileNo)) {
                uni.showToast({
                    title: '手机号错误',
                    icon: 'error',
                    duration: 2000
                });
                return;
            }
            uni.showToast({ title: '获取验证码中...', icon: 'loading' });
            this.formData.orderNo = uuid.v1().slice(0, 32);
            try {
                const result = await orderApi.sginSendMsg({
                    "orderNo": this.formData.orderNo, // 订单号
                    "customerName": this.formData.customerName, // 用户姓名
                    "idNo": this.formData.idCardNo, // 身份证号
                    "bankCardNo": this.formData.bankCardNo, // 银行卡号
                    "mobileNo": this.formData.mobileNo, // 手机号
					"expireDate": this.formData.expireDate,
					"cvv": this.formData.cvv
                });
                this.captchaCD = 60;
                this.captchaTimer = setInterval(() => {
                    if (this.captchaCD > 0) {
                        this.captchaCD -= 1;
                    } else {
                        clearInterval(this.captchaTimer);
                    }
                }, 1000);
                uni.showToast({ title: '验证码发送成功', icon: 'success' });
                return result;
            } catch (error) {
                uni.showToast({ title: error || '验证码发送失败', icon: 'error' });
            }
        },

        // 签约
        async sgin() {
            const result = await orderApi.sgin({
                "orderNo": this.formData.orderNo, // 订单号
                "verificationCode": this.formData.verificationCode, // 验证码
                "mobileNo": this.formData.mobileNo, // 手机号
                "bankCardNo": this.formData.bankCardNo, // 银行卡号
                "cardImgFront": this.formData.cardImgFront, // 银行卡正面
                "cardImgBack": this.formData.cardImgBack, // 银行卡背面
                "bankDeposit": this.formData.bankDeposit, // 开户行
				"expireDate": this.formData.expireDate,
				"cvv": this.formData.cvv
            });
            return result;
        },
    },
}
</script>

<style lang="scss" scoped>
.page {
    padding: $page_padding;
}
.step-wrap {
    margin-top: 53upx;
    margin-bottom: 35upx;
    display: flex;
    justify-content: center;
    view {
        background: #cfcfcf;
        color: #fff;
        font-size: 28upx;
        font-weight: bold;
        padding: 21upx 44upx;
        border-radius: 35px;
    }
    view + view {
        margin-left: 176upx;
    }
    .active {
        background: #12b9a3;
    }
}

.card {
    padding: 40upx 16upx;
    margin-bottom: 30upx;
    .title {
        font-size: 28upx;
        font-weight: bold;
        color: #333;
        margin-bottom: 29upx;
    }
    .img-wrap {
        margin-bottom: 34upx;
        display: flex;
        justify-content: space-between;
        image {
            width: 330upx;
            height: 184upx;
        }
    }
    .desc {
        margin-bottom: 49upx;
        font-size: 26upx;
        font-weight: bold;
        color: #999;
    }

    .list {
        .label {
            height: 40upx;
            margin-bottom: 28upx;
            font-size: 28upx;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            > view {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                .captcha_ipt {
                    width: 30%;
                }
            }
        }
    }
}
.tip {
    margin-bottom: 200upx;
    display: flex;
    justify-content: center;
    text {
        font-size: 24upx;
        font-weight: bold;
        color: #eb314f;
        text-align: left;
    }
}
.tip2 {
    width: 100%;
    font-size: 26upx;
    font-weight: bold;
    text-align: center;
    color: #232323;
    position: fixed;
    bottom: 113upx;
}
.bottom-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    line-height: 96upx;
    background: #12baa4;
    text-align: center;
    color: #fff;
}

.bottom_btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    &_wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
    }
    .button {
        flex: 1;
        line-height: 96upx;
        font-weight: bold;
    }

    .button:nth-child(1) {
        background: #fff;
        color: #666;
    }

    .button:nth-child(2) {
        background: #12baa4;
        color: #fff;
    }
}
</style>
